<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>城市天气</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="./images/logo.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="str" />
                <button class="input_sub" @click="changeCity(str)">
                    搜 索
                </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
            </div>
        </div>
        <ul class="weather_list">
            <li v-for="(item, index) in weatherList" :key="index" :style="{transitionDelay:index*100+'ms'}">
                <div class="info_type">
                    <span class="iconfont" style="font-size: 24px;">{{item.wea}}</span>
                </div>
                <div class="info_temp">
                    <b>低温：{{item.tem_night}}℃</b>
                    ~
                    <b>高温：{{item.tem_day}}℃</b>
                </div>
                <div class="info_date"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            str: "",
            weatherList: []
        },
        methods: {
            changeCity(cityName) {
                const appid = '实际的appid';
                const appsecret = '实际的appsecret';

                axios.get(`http://gfeljm.tianqiapi.com/api`, {
                    params: {
                        version: 'v9',
                        appid: appid,
                        appsecret: appsecret,
                        city: cityName
                    }
                })
                    .then(response => {
                        this.weatherList = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取天气数据失败:', error);
                        alert('获取天气数据失败，请稍后重试');
                    });
            }
        },
        mounted() {
            this.changeCity('北京');
        }
    })
</script>